<template>
    <div class="update-name">
        <!-- 导航栏 -->
        <van-nav-bar title="修改个性签名" left-text="取消" right-text="确定" @click-left="$emit('close')"
            @click-right="onConfirm"></van-nav-bar>

        <!-- 修改个性签名输入框 -->
        <div class="field-wrap">
            <van-field v-model.trim="localSignature" rows="4" autosize type="textarea" maxlength="50" placeholder="请输入个性签名"
                show-word-limit />
        </div>

    </div>
</template>

<script>
import { Toast } from 'mint-ui';
import { UpdateUserSignatureModel } from 'models/userInfo';
import { mapState, mapMutations } from 'vuex';

export default {
    name: 'UpdateSignature',
    computed: {
        ...mapState(['userInfo'])
    },
    data() {
        return {
            localSignature: ''
        }
    },
    methods: {
        ...mapMutations(['updateSignature']),
        // 确认修改
        onConfirm() {
            const updateUserSignatureModel = new UpdateUserSignatureModel();
            updateUserSignatureModel.updateUserSignature(this.localSignature, this.userInfo.id).then((res) => {
                if (res && res.status === 0) {
                    const data = res.data;

                    // 更新state
                    this.updateSignature(this.localSignature);
                    this.localSignature = '';
                    // 提示信息
                    Toast(data.msg);
                    // 关闭弹出
                    this.$emit('close')
                } else {
                    this.localSignature = '';
                    // 提示信息
                    Toast(res.data.msg);
                }
            })
        }
    }
}
</script>

<style lang="scss" scoped>
.field-wrap {
    padding: .1rem;
}
</style>
